<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .avatarImg{
            width: 150px;
            height: 150px;
            margin: 0 auto;
            display: block;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <form action="/index.php/index/index/getFace" enctype="multipart/form-data" method="post">
        <input type="file" name="pic">
        <input type="submit" value="表单提交">
        <input class="btn" type="button" value="ajax提交">
    </form>
    <img class="avatarImg" src="" alt="">
    <script src="js/jquery-2.1.0.js"></script>
    <script>
        $(".btn").on("click", function () {
            var file = document.querySelector('[type=file]');
            // 通过FormData将文件转成二进制数据
            var formData = new FormData();
            // 将文件转二进制
            console.log(file.files[0]);
            formData.append('pic', file.files[0]);
            $.ajax({
                url: '/index/index/getFace',
                type: 'POST',
                data: formData, // 上传formdata封装的数据
                dataType: 'JSON',
                cache: false, // 不缓存
                processData: false, // jQuery不要去处理发送的数据
                contentType: false, // jQuery不要去设置Content-Type请求头
                success: function (res) { //成功回调
                    console.log(res);
                    if(res.res ==1){
                        $(".avatarImg").attr("src",res.data.avatarImg);
                    }
                }
            });
        })



        $.ajax({
            url:"http://shuaitp.bluej.cn/index.php/index/Message/index",
            method:"get",
            data:{
                name:"bgg"
            },
            success(res){
                console.log(res);
            }
        })
    </script>
</body>

</html>